<template>
<div id="header" v-show="show">
  <mu-appbar titleClass="center" :style="style" :zDepth="0">
      <div v-html="title"></div>
      <mu-icon-button slot="left" @click="historyBack" v-if="leftButton" style="position:absolute;">
          <i class="iconfont icon-back-copy t1"></i>
      </mu-icon-button>
      <mu-icon-button slot="right" @click="rightClick" v-if="rightButton">
        <div v-html="rightHtml" class="f12"></div>
      </mu-icon-button>
  </mu-appbar>
<!-- <mu-divider></mu-divider> -->
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
  computed: {
    ...mapState({
      style: state => state.header.style,
      title: state => state.header.title,
      leftButton: state => state.header.leftButton,
      rightButton: state => state.header.rightButton,
      rightHtml: state => state.header.rightHtml,
      rightClick: state => state.header.rightClick,
      show: state => state.header.show
    })
  },
  methods: {
    historyBack () {
      this.$router.back()
    }
  }
}
</script>
<style lang="less">
.mu-appbar {
  img {
    height:30px;
    position: relative;
    margin-top: 20px;
  }
  .left {
    width: 36px;
  }
  .right {
    width: 48px;
  }
}
</style>

